<template>
	<view class="html">
		<u-tabs :list="list4" @click="clickTab" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`"
			:activeStyle="{
		        color: '#303133',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }" :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1)'
		    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		<u-upload class="upload" :fileList="fileList1" @afterRead="startOCR" name="1" multiple :maxCount="1">
			<image :src="src" mode="aspectFill" style="width: 100vw;height: 25vh;"></image>
		</u-upload>
		<u-divider text="" :dashed="true"></u-divider>
		<u-button v-if="newContext!=''" type="error" @click="copyContext()" plain style="margin-top: 2%;" text="一键复制">
		</u-button>
		<u-text style="margin-top: 3%;" size="18" :text="newContext"></u-text>
		<u-notify ref="tipNotify"></u-notify>
	</view>

</template>

<script>
	import {
		baiduImgTranslate,
		baiduOcr
	} from '../../api/translateapi.js'
	export default {
		data() {
			return {
				src: '/static/uploadimg.jpg',
				lineBg: "",
				fileList1: [],
				platform: 'baidu',
				newContext: '',
				list4: [{
					name: '百度',
					value: 'baidu'
				}, {
					name: '阿里云',
					value: 'ali'
				}]
			}
		},
		methods: {
			startOCR(e) {
				let url = e.file[0].url;
				this.src = url;
				if (this.platform == 'baidu') {
					uni.showLoading({
						title: "加载中",
						mask: true
					})
					new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'http://101.132.132.130:8095/baiduOcr/ocr',
							filePath: url,
							name: 'file',
							success: (res) => {
								uni.hideLoading();
								let result = JSON.parse(res.data);
								if (result.code == 200) {
									this.newContext = result.data;
								} else {
									this.$refs.tipNotify.warning("系统繁忙");
								}

							}
						});
					})
				} else if (this.platform == 'ali') {
					uni.showLoading({
						title: "加载中",
						mask: true
					})
					new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'http://127.0.0.1:8090/aliOcr/ocr',
							filePath: url,
							name: 'file',
							success: (res) => {
								uni.hideLoading();
								let result = JSON.parse(res.data);
								if (result.code == 200) {
									this.newContext = result.data;
								} else {
									this.$refs.tipNotify.warning("系统繁忙");
								}

							}
						});
					})
				}
			},
			clickTab(item) {
				this.platform = item.value;
				this.fileList1 = [];
				this.src = "/static/uploadimg.jpg";
			},
			copyContext() {
				let reg = /^\s*$/g;
				if (!reg.test(this.newContext)) {
					uni.setClipboardData({
						data: this.newContext
					})
				}
			},
			init() {
				this.fileList1 = [];
				this.src = "/static/uploadimg.jpg";
				this.newContext = "";
			}
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			this.init();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
		}
	}
</script>

<style lang="scss">
	.html {
		width: 96vw;
		margin: 0 auto;

		.upload {
			margin-top: 2%;
			width: 95vw;
			height: 25vh;
			border: 1px solid #d6d6d6;
			overflow: hidden;
		}
	}
</style>
